<template>
  <div class="shopCart">
    <div class="cartList" v-for="(goods, index) in shopList" :key="goods.id">
      <van-radio-group class="checked" v-model="goods.isChecked">
        <div class="checkbox1">
          <van-checkbox :checked="goods.isChecked" @click="changeCheckedOne(goods)">
          </van-checkbox>
        </div>
      </van-radio-group>
      <van-card class="Card" :num="goods.skuNum" :price="goods.skuPrice" desc="[1盒装]" :title="goods.skuName"
        :thumb="goods.imgUrl">
        <template #footer>
          <van-button size="mini" @click="changeNum('add', goods)">+1</van-button>
          <van-button size="mini" @click="changeNum('sub', goods)">-1</van-button>
          <van-button size="mini" @click="removeGood(goods, index)">删除商品</van-button>
        </template>
      </van-card>
    </div>

    <van-submit-bar :price="total" button-text="结算" @submit="onSubmit" decimal-length="1" safe-area-inset-bottom>
      <!-- <van-checkbox v-model="checked" @click="checkedAll(checked)">全选</van-checkbox> -->

      <input type="checkbox" :checked="checkAll" @click="checkedAll">
      <span>全选</span>
      <text class="inputBox">总数：{{ num1 }}</text>
      <template #tip> 开通Pro会员，享天天免邮 <span>立即开通</span> </template>
    </van-submit-bar>
  </div>

  <!-- <div class="empty" >
      <h2>购物车空空如也 <router-link to="/">去购物吧~~~</router-link></h2>
      <img src="http://49.232.112.44/img/empty.751bed26.gif" alt="" />
    </div> -->
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "ShopCart",
});
</script>
<script lang="ts" setup>
import request from '@/utils/request'
import { onMounted, ref, computed, nextTick } from "vue";
import { showToast, showConfirmDialog } from "vant";
import type { CartListData } from '@/api/cartList'
import cartApi from '@/api/cartList'
import { storeToRefs } from 'pinia';
import { shopDataStore } from '@/stores/shopcart'
import { guard } from '@/api/login/index'
import router from '@/router';
import routes from '@/router'
import { watch } from 'vue'
const shopStore = shopDataStore()
const { shopList } = storeToRefs(shopStore)

// const {shopList} = shopStore
onMounted(async () => {
  await guard(router.currentRoute.value, routes, localStorage.getItem('token_key'), watch)
  shopStore.getShopList()

})

//删除单个商品
const removeGood = async (goods: CartListData, index: number) => {
  try {
    const res = await cartApi.removeCartList(goods.skuId)
    alert('删除成功')
    shopStore.getShopList()
  } catch (error) {
    alert('删除失败')
  }
}

//全选全不选

const checkedAll = async (event: any) => {
  const { checked } = event.target
  const newChecked = checked ? 1 : 0
  const ids = shopList.value.map(item => item.skuId)
  await shopStore.CheckCartAll(newChecked, ids)
  shopList.value.forEach(item => {
    item.isChecked = newChecked
  })
  shopStore.getShopList()
}


//修改数量
const changeNum = (type: string, goods: CartListData) => {
  // num.value += num1
  if (type === 'sub') {
    goods.skuNum -= 1
    if (goods.skuNum < 1) {
      goods.skuNum = 1
      return alert('用户最小购买数量是 1')
    }
  } else {
    goods.skuNum += 1
    if (goods.skuNum > 20) {
      goods.skuNum = 20
      return alert('用户最大购买数量是 20')
    }
  }
}

//单个选中状态

const changeCheckedOne = async (goods: CartListData) => {
  const newChecked = goods.isChecked === 0 ? 1 : 0
  try {
    await cartApi.reqCheckCart(goods.skuId, newChecked.toString())
    shopStore.getShopList()
    console.log(111);
  } catch (error) {

  }
}

//计算总价
const total = computed(() => {
  let total = 0
  shopList.value.forEach((item) => {
    if (item.isChecked === 1) {
      total += item.skuNum * item.skuPrice * 100
    }
  })
  return total
})
//计算单个选中与全选联动
const checkAll = computed(() => {
  return shopList.value.every((item) => item.isChecked === 1) && shopList.value.length !== 0
})
//计算总数
const num1 = computed(() => {
  let num1 = 0
  shopList.value.forEach(item => {
    if (item.isChecked === 1) {
      num1 += item.skuNum
    }
  })
  return num1
})

//点击提交按钮
const onSubmit = () => {
  router.push(
    {
      name: 'address'
    })
  shopStore.getOrderList()
};

</script>

<style lang="less" scoped>
.shopCart {
  height: 100%;
  background-color: #f7f7f7;

  .cartList {
    display: flex;
    justify-content: space-around;

    .checked {
      margin-left: 5px;

      .checkbox1 {
        margin: 5px auto;
        margin-top: 55px;
      }
    }

    .Card {
      width: 310px;
      border-radius: 20px;
      margin: 10px;
      background-color: white;

    }
  }

  .inputBox {
    margin-left: 15px;
  }


  :deep(.van-submit-bar) {
    position: fixed;
    bottom: 50px;
    left: 0;
  }
}
</style>
